<template>
    <Popup ref="popRef" title="添加/编辑院系" width="500px" async @confirm="submit" @close="$emit('close')"
        :confirmLoading="loading" :showFooter="props.type !== 'view'">
        <div>
            <el-form label-width="90px" :model="formData" ref="formRef" :rules="rules" @submit.prevent
                :class="props.type === 'view' ? 'readonly_form' : ''">
                <custom-title title="基础信息" style="margin-bottom: 20px"></custom-title>

                <el-form-item label="id" prop="id" style="display: none">
                    <el-input v-model="formData.id"></el-input>
                </el-form-item>

                <el-form-item label="院系名称" prop="name" :hide-required-asterisk="props.type === 'view'">
                    <el-input :readonly="props.type === 'view'" placeholder="请输入院系名称"
                        v-model="formData.name"></el-input>
                </el-form-item>
                <el-form-item label="院系描述" prop="describe">
                    <el-input :readonly="props.type === 'view'" placeholder="请输入院系描述"
                        v-model="formData.describe"></el-input>
                </el-form-item>

                <div v-if="props.type === 'view'">
                    <custom-title title="班级信息" style="margin-bottom: 20px"></custom-title>

                    <el-form-item label="已关联班级" prop="tag">
                        <el-space wrap>
                            <el-tag type="primary">Tag 1</el-tag>
                            <el-tag type="primary">Tag 1</el-tag>
                            <el-tag type="primary">Tag 1</el-tag>
                            <el-tag type="primary">Tag 1</el-tag>
                            <el-tag type="primary">Tag 1</el-tag>
                            <el-tag type="primary">Tag 1</el-tag>
                            <el-tag type="primary">Tag 1</el-tag>
                            <el-tag type="primary">Tag 1</el-tag>
                        </el-space>
                    </el-form-item>
                </div>
            </el-form>
        </div>
    </Popup>
</template>

<script setup lang="ts" name="addUserPop">
import { addDepartment, editDepartment } from "@/api/consumer";
import feedback from "@/utils/feedback";
import type { FormInstance, FormRules } from "element-plus";
import customTitle from "@/components/custom-title/index.vue";
import { useRequest } from "vue-hooks-plus";

interface IFormData {
    name: string;
    describe: string;
    id?: string;
}

interface Props {
    type?: string;
}
const props = defineProps<Props>();

const emit = defineEmits(["close", "confirm"]);

//弹框ref
const popRef = shallowRef();
//表单ref
const formRef = shallowRef<FormInstance>();

//表单数据
const formData: IFormData = reactive({
    describe: "",
    name: "",
    id: "",
});

const rules = reactive<FormRules<IFormData>>({
    name: [
        {
            required: true,
            message: "请填写昵称",
            trigger: "change",
        },
    ],
});

// 新增
const { loading, runAsync } = useRequest(
    async () => {
        if (formData.id) {
            return await editDepartment({ ...formData, id: formData.id });
        }
        return await addDepartment({ ...formData, id: undefined });
    },
    {
        manual: true,
    }
);

//提交表单
const submit = async () => {
    await formRef.value?.validate();
    await runAsync();

    if (formData.id) {
        feedback.msgSuccess("编辑成功！");
    } else {
        feedback.msgSuccess("新增成功！");
    }

    //   触发父元素的方法
    emit("confirm");
    popRef.value.close();
};

//打开弹框
const open = () => {
    popRef.value.open();
};

const setFormData = async (row: any) => {
    for (const key in formData) {
        if (row[key] != null && row[key] != undefined) {
            //@ts-ignore
            formData[key] = row[key];
        }
    }
};

defineExpose({ open, setFormData });
</script>

<style scoped lang="scss">
.readonly_form {
    :deep(.el-input__wrapper) {
        box-shadow: none;
    }

    :deep(.el-form-item__label) {
        height: 40px;
        line-height: 40px;
    }
}
</style>
